<template>
  <!-- 壕榜 -->
  <div class="moat-wrap">
    <img src="@/assets/image/moat/bg.png" class="bg" />
    <div class="firstNav publicVCenter">
      <img src="@/assets/image/moat/back.png" class="backIcon" v-tap="{ methods: toHome }" />
      <div class="navItem" :class="{ active: firstNavIndex === 0 }" v-tap="{ methods: chooseFirstNav, navIndex: 0 }">本店壕榜</div>
      <div class="navItem" :class="{ active: firstNavIndex === 1 }" v-tap="{ methods: chooseFirstNav, navIndex: 1 }">全国月榜</div>
    </div>
    <div class="secondNav publicVCenter">
      <div class="navItem publicHvCenter" :class="{ active: secondNavIndex === 0 }" v-tap="{ methods: chooseSecondNav, navIndex: 0 }">
        日榜
      </div>
      <div class="navItem publicHvCenter" :class="{ active: secondNavIndex === 1 }" v-tap="{ methods: chooseSecondNav, navIndex: 1 }">
        周榜
      </div>
      <div class="navItem publicHvCenter" :class="{ active: secondNavIndex === 2 }" v-tap="{ methods: chooseSecondNav, navIndex: 2 }">
        月榜
      </div>
      <div class="navItem publicHvCenter" :class="{ active: secondNavIndex === 3 }" v-tap="{ methods: chooseSecondNav, navIndex: 3 }">
        总榜
      </div>
    </div>
    <div class="noData publicVCenter" v-if="!hasData">
      <img src="@/assets/image/moat/crown.png" class="crownImg" />
      <div class="logoBox publicHvCenter">
        <img src="@/assets/image/moat/logo.png" class="logoImg" />
      </div>
      <div class="note">榜首空缺，快来上榜</div>
      <div class="sendGiftBtn publicHCenter" v-tap="{ methods: toSendGift }">我要上榜</div>
    </div>
    <div class="firstRank publicVCenter" v-if="hasData">
      <img src="@/assets/image/moat/crown.png" class="crownImg" />
      <div class="logoBox publicHvCenter">
        <img :src="firstUser.avator" class="avator" />
      </div>
      <div class="user publicVCenter">
        <div class="name">{{ firstUser.name }}</div>
        <div class="sexIcon" :class="{ boy: firstUser.type === '1', girl: firstUser.type === '2' }"></div>
      </div>
      <div class="sendVal">豪气值：{{ firstUser.hqVal }}</div>
    </div>
    <div class="otherRank" v-if="hasData">
      <div class="rankItem publicVCenter" v-for="(item, index) in otherRank" :key="index">
        <div class="num">{{ index + 2 }}</div>
        <img :src="item.avator" class="avator" />
        <div class="name">{{ item.name }}</div>
        <div class="sexIcon" :class="{ boy: item.type === '1', girl: item.type === '2' }"></div>
        <div class="hqVal">
          <div class="hqName">豪气值:</div>
          <div class="hqValue">{{ item.hqVal }}</div>
        </div>
      </div>
    </div>
    <div class="myRank publicVCenter">
      <div class="rankInfo">
        <div class="stauts" v-if="!myHqVal">未上榜</div>
        <div class="my" v-if="!myHqVal">我的排名：99+</div>
        <div class="my" v-if="myHqVal">我的排名：{{ myRank }}</div>
      </div>
      <div class="userInfo publicVCenter">
        <img :src="headImg" class="headImg" />
        {{ name }}
      </div>
      <div class="giftVal">豪气值：{{ myHqVal }}</div>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapState } from 'vuex';
import { getGiftRankList } from '@/api/index/index';
import { timeoutTask } from '@/utils/index';
import { POPUP_MODULE } from '@/assets/constant/index';

export default {
  name: 'moat',
  data() {
    return {
      firstNavIndex: 0,
      secondNavIndex: 0,
      hasData: false,
      firstUser: {
        avator: '',
        name: '',
        hqVal: '',
      },
      otherRank: [],
      myHqVal: 0,
      myRank: 0,
      giftModuleKey: POPUP_MODULE.giftModule.key,
    };
  },
  watch: {},
  computed: {
    ...mapState({
      headImg: (state) => state.user.headImg,
      name: (state) => state.user.name,
    }),
  },
  created() {
    getGiftRankList()
      .then((res) => {
        console.log('giftRankList', res);
        const tmpLen = res.list.length;
        if (tmpLen > 0) {
          this.hasData = true;
          this.firstUser.avator = res.list[0].avator;
          this.firstUser.name = res.list[0].wx_name;
          this.firstUser.hqVal = res.list[0].gift_price;
          this.firstUser.type = res.list[0].type;
          if (tmpLen > 1) {
            this.otherRank = this.otherRank.slice(1, tmpLen).map((item) => {
              return {
                avator: item.avator,
                name: item.wx_name,
                hqVal: item.gift_price,
                type: item.type,
              };
            });
          }
          const tmpIndex = res.list.findIndex((item) => item.wx_name === this.name);
          if (tmpIndex > -1) {
            this.myHqVal = res.list[tmpIndex].gift_price;
            this.myRank = tmpIndex + 1;
          }
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
  mounted() {},
  methods: {
    ...mapMutations({
      togglePopup: 'app/togglePopup',
    }),
    toHome() {
      this.$router.replace({
        path: '/',
      });
    },
    toSendGift() {
      this.$router.replace({
        path: '/',
      });
      timeoutTask(() => {
        this.togglePopup(this.giftModuleKey);
      }, 1000);
    },
    chooseFirstNav(pObj) {
      this.firstNavIndex = pObj.navIndex;
    },
    chooseSecondNav(pObj) {
      this.secondNavIndex = pObj.navIndex;
    },
  },
  beforeDestroy() {},
};
</script>
<style lang="less" scoped>
.moat-wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #1b062d;
  .sexIcon {
    background-size: 100% 100%;
    width: 40px;
    height: 28px;
    &.boy {
      background-image: url('../../assets/image/moat/boyIcon.png');
    }
    &.girl {
      background-image: url('../../assets/image/moat/girlIcon.png');
    }
  }
  .bg {
    position: absolute;
    top: -26vw;
    left: 0;
    width: 750px;
    height: 1624px;
    image-rendering: auto;
  }
  .firstNav {
    position: relative;
    justify-content: space-around;
    height: 88px;
    .backIcon {
      width: 54px;
      height: 54px;
      position: absolute;
      left: 28px;
    }
    .navItem {
      font-size: 28px;
      font-weight: 500;
      color: #756ea1;
      &.active {
        font-size: 32px;
        color: #f6448f;
      }
    }
  }
  .secondNav {
    width: 576px;
    height: 60px;
    background: #22104e;
    border-radius: 70px;
    margin: 0 auto;
    position: relative;
    .navItem {
      width: 142px;
      height: 48px;
      font-size: 28px;
      color: #756ea1;
      font-weight: 500;
      &.active {
        background: #5412a9;
        border-radius: 70px;
        color: #fff;
      }
    }
  }
  .noData {
    width: 750px;
    height: 598px;
    position: relative;
    background-image: url('../../assets/image/moat/square.png');
    background-size: 100% 100%;
    flex-direction: column;
    padding-top: 120px;
    .crownImg {
      width: 151px;
      height: 128px;
      position: absolute;
      left: 349px;
      top: 4px;
    }
    .logoBox {
      width: 160px;
      height: 160px;
      border-radius: 50%;
      background: #b88254;
      .logoImg {
        width: 120px;
        height: 120px;
      }
    }
    .note {
      font-size: 32px;
      font-weight: 500;
      color: #ffffff;
      margin-top: 4px;
    }
    .sendGiftBtn {
      width: 244px;
      height: 88px;
      background-image: url('../../assets/image/moat/btn.png');
      background-size: 100% 100%;
      color: #fff;
      margin-top: 16px;
      line-height: 80px;
    }
  }
  .myRank {
    width: 750px;
    height: 120px;
    background: #343138;
    position: absolute;
    bottom: 0;
    display: flex;
    padding: 0 24px;
    .rankInfo {
      .stauts {
        font-size: 24px;
        font-weight: 400;
        color: #ff3675;
        text-align: center;
      }
      .my {
        font-size: 20px;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
      }
    }
    .userInfo {
      font-size: 28px;
      font-weight: 400;
      color: #ffffff;
      margin-left: 16px;
      height: 104px;
      .headImg {
        width: 88px;
        height: 88px;
        border-radius: 50%;
        margin-right: 16px;
      }
    }
    .giftVal {
      font-size: 24px;
      font-weight: 600;
      color: #ffecaa;
      position: absolute;
      right: 44px;
    }
  }
  .firstRank {
    width: 750px;
    height: 598px;
    position: relative;
    background-image: url('../../assets/image/moat/square.png');
    background-size: 100% 100%;
    flex-direction: column;
    padding-top: 120px;
    .crownImg {
      width: 151px;
      height: 128px;
      position: absolute;
      left: 349px;
      top: 4px;
    }
    .logoBox {
      width: 208px;
      height: 208px;
      background: #f1e088;
      border-radius: 50%;
      box-shadow: 0px 0px 22px 8px rgba(255, 255, 255, 0.5) inset, 0px 4px 16px 0px rgba(233, 188, 64, 0.25);
      .avator {
        width: 160px;
        height: 160px;
        border-radius: 50%;
      }
    }
    .user {
      .name {
        font-size: 32px;
        font-weight: 500;
        color: #ffffff;
        margin-right: 4px;
      }
    }
    .sendVal {
      font-size: 24px;
      font-weight: 500;
      color: #ffeca9;
    }
  }
  .otherRank {
    width: 750px;
    height: calc(100vh - 866px);
    position: relative;
    overflow-y: scroll;
    .rankItem {
      width: 686px;
      height: 120px;
      background: rgba(88, 85, 102, 0.5);
      border-radius: 16px;
      margin: 0 auto;
      margin-bottom: 16px;
      position: relative;
      .num {
        font-size: 44px;
        font-weight: 500;
        color: #ffffff;
        padding-left: 40px;
      }
      .avator {
        width: 88px;
        height: 88px;
        border-radius: 50%;
        margin-left: 40px;
      }
      .name {
        font-size: 28px;
        font-weight: 400;
        color: #ffffff;
        margin-left: 32px;
        max-width: 168px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .sexIcon {
        margin-left: 14px;
      }
      .hqVal {
        position: absolute;
        right: 32px;
        font-size: 24px;
        font-weight: 600;
        color: #ffecaa;
        .hqName {
          text-align: center;
        }
        .hqValue {
          text-align: center;
        }
      }
    }
  }
}
</style>
